<template>
  <div class="indexPart">
    <el-container>
<!--      头部-->
      <el-header style="height: 200px">
        <el-carousel :interval="4000" type="card" height="200px">
          <el-carousel-item v-for="item in 4" :key="item">
            <el-image :src=images[item]></el-image>
          </el-carousel-item>
        </el-carousel>
      </el-header>
<!--      中部-->
      <el-main>
        <div style="height: 100px">
          <el-input v-model="input" placeholder="请输入内容" style="width: 300px"></el-input>
          <el-button type="primary" icon="el-icon-search" @click="searchData(input)">搜索</el-button>
        </div>
        <div style="text-align: left">
          <p style="font-size: 20px;font-family: Arial, Helvetica, sans-serif;">陈超词典</p>
          <hr style="border: 1px solid lightgray">
          <el-tabs v-model="activeName" @tab-click="handleClick" >
            <el-tab-pane :label="item.theLabel" :name="item.theName" :url="item.url" v-for="item in tabPaneData" :key="item.id">
              <el-table :data="tableData"
                        style="width: 90%;margin: 0 auto"
                        :row-style="{height: '60px'}"
                        :header-cell-style="{'font-size':'20px','font-family':'Arial Rounded MT Bold'}"
              >
                <el-table-column prop="information" label="" >
                </el-table-column>
              </el-table>
            </el-tab-pane>

          </el-tabs>

        </div>
        <div class="block"
             style="height: 100px"
        >
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[8, 10, 12,16]"
              :page-size=pageSize
              layout="total, sizes, prev, pager, next, jumper"
              :total=total>
          </el-pagination>
        </div>
      </el-main>
<!--      底部区域-->
      <el-footer style="background-color: white;padding: 0">
        <div style="background-color: #E9EEF3;height: 200px;width: 100%">

        </div>
<!--        <div style="background-color: #333333;height: 200px ;width: 100%">-->
<!--          -->
<!--        </div>-->
      </el-footer>
  </el-container>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'IndexVue',
  props: {
    msg: String
  },
  data(){
    return {
      //images
      images:['','/img/players1.png','/img/players2.png','/img/players3.png','/img/players4.png'],
      //当前的URL
      currentURL:'',
      //tab的初始化选择设定
      activeName:'first',
      //输入框的数据绑定
      input:'',
      //表格数据
      tableData:[
      ],
      //分页的属性初始设定
      currentPage:1,
      pageSize:8,
      total:24,
      //动态tab-pane的数据源,其中的url是一点重要的数据
      tabPaneData:[

      ]
    }
  },
  methods:{

    //tab标签点击的回调
    handleClick(tab,event){
      console.log(tab, event);
      console.log(tab.index)
      console.log(tab.$attrs.url)
      //修改当前tab所在的URL
      this.currentURL=tab.$attrs.url
      console.log('tab点击请求',this.currentURL,this.currentPage,this.pageSize)
      //1、接收搜索的输入值，然后向后端发出请求
      // axios.get('http://host:port/url',{
      //   url:this.currentURL,pageNum:this.currentPage,pageSize:this.pageSize
      // }).then(
      //     response=>{
      //       console.log(response.data)
      // //2、将从后端接收的数据进行处理
      //     },
      //     error=>{
      //       console.log(error.message)
      //     }
      // )
    },
    //搜索的回调函数
    searchData(element){

      // 1、接收搜索的输入值，然后向后端发出请求
      axios.get(' http://localhost:1314/dictionary',
          // {element:element,pageNum:this.currentPage,pageSize:this.pageSize}
      ).then(
          response=>{
            // console.log('responseData',response.data.data)
            this.tabPaneData=response.data.data
      //2、将从后端接收的数据进行处理
          },
          error=>{
            console.log(error.message)
          }
      )
      // console.log('tablePaneData',this.tabPaneData)

      // console.log('search点击请求',element,this.currentPage,this.pageSize)
    },
    //页码大小变化触发的事件
    handleSizeChange(val) {
      this.pageSize=val
      console.log('页码尺寸请求',this.currentURL,this.currentPage,val)
      // console.log(`每页 ${val} 条`);
      //向后端发送一个请求，一页展示的数据量
      // console.log(this.activeName)
      //获取当前激活的tab
      // console.log(this.currentURL)
      //1、接收搜索的输入值，然后向后端发出请求
      // axios.get('http://host:port/url',{
      //   url:this.currentURL,pageNum:this.currentPage,pageSize:val
      // }).then(
      //     response=>{
      //       console.log(response.data)
      // //2、将从后端接收的数据进行处理
      //     },
      //     error=>{
      //       console.log(error.message)
      //     }
      // )
    },
    //当期页切换触发事件
    handleCurrentChange(val) {
      this.currentPage=val
      console.log('页码改变请求',this.currentURL,val,this.pageSize)
      // console.log(`当前页: ${val}`);
      //向后端发送一个请求，展示某页的数据
      // console.log(this.currentURL)

      //1、接收搜索的输入值，然后向后端发出请求
      // axios.get('http://host:port/url',{
      //   url:this.currentURL,pageNum:this.currentPage,pageSize:this.pageSize
      // }).then(
      //     response=>{
      //       console.log(response.data)
      // //2、将从后端接收的数据进行处理
      //     },
      //     error=>{
      //       console.log(error.message)
      //     }
      // )
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.indexPart{
  background-image: url("../assets/lebron1.jpg");
}
.el-header, .el-footer {
    /*background-color: skyblue;*/
    color: #333;
    text-align: center;
    /*line-height: 90px;*/
    /*height: 90px;*/

  }
.el-main {
    background-color: ghostwhite;
    color: #333;
    text-align: center;
    /*line-height: 160px;*/
  }
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

/*.el-carousel__item:nth-child(2n) {*/
/*  background-color: #99a9bf;*/
/*}*/

/*.el-carousel__item:nth-child(2n+1) {*/
/*  background-color: #d3dce6;*/
/*}*/
</style>
